<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Advanced TimeLine : HTML / CSS / JavaScript</title>



    <link rel="stylesheet" href="css/style.css">


</head>

<body>
    <div class="social">
        follow me :
        <a href="https://codepen.io/mo7hamed/pens/public/#" target="_blank">codepen</a>

        <a href="https://plus.google.com/u/0/115875826373261470610" target="_blank">gmail</a>
    </div>

    <div class="box">
        <ul id="first-list">
            <li>
                <span></span>
                <div class="title">comment #01</div>
                <div class="info">the best animation , the best toturials you would ever see .</div>
                <div class="name">- dr. mohamed -</div>
                <div class="time">
                    <span>JUN, 17<sup>th</sup></span>
                    <span>12:00 AM</span>
                </div>
            </li>
            <li>
                <span></span>
                <div class="title">summery #01</div>
                <div class="info">the best animation , the best toturials you would ever see here only . you can learn how to animate and how to use SVG . even else you can add your own animations .</div>
                <div class="name">- eng. amr -</div>
                <div class="time">
                    <span>JUN, 29<sup>th</sup></span>
                    <span>11:36 AM</span>
                </div>
            </li>
            <li>
                <span></span>
                <div class="title">comment #02</div>
                <div class="info">the best animation , the best toturials you would ever see . what about canvas ?? do you like it ..</div>
                <div class="name">- dr. ahmed -</div>
                <div class="time">
                    <span>FEB, 2<sup>nd</sup></span>
                    <span>02:00 PM</span>
                </div>
            </li>

            <div class="arrow" id="btn1">

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M135.899,167.877c1.902,1.902,4.093,2.851,6.567,2.851s4.661-0.948,6.562-2.851L282.082,34.829    c1.902-1.903,2.847-4.093,2.847-6.567s-0.951-4.665-2.847-6.567L267.808,7.417c-1.902-1.903-4.093-2.853-6.57-2.853    c-2.471,0-4.661,0.95-6.563,2.853L142.466,119.622L30.262,7.417c-1.903-1.903-4.093-2.853-6.567-2.853    c-2.475,0-4.665,0.95-6.567,2.853L2.856,21.695C0.95,23.597,0,25.784,0,28.262c0,2.478,0.953,4.665,2.856,6.567L135.899,167.877z" fill="#FFFFFF"/>
                            <path d="M267.808,117.053c-1.902-1.903-4.093-2.853-6.57-2.853c-2.471,0-4.661,0.95-6.563,2.853L142.466,229.257L30.262,117.05    c-1.903-1.903-4.093-2.853-6.567-2.853c-2.475,0-4.665,0.95-6.567,2.853L2.856,131.327C0.95,133.23,0,135.42,0,137.893    c0,2.474,0.953,4.665,2.856,6.57l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854l133.054-133.046    c1.902-1.903,2.847-4.093,2.847-6.565c0-2.474-0.951-4.661-2.847-6.567L267.808,117.053z" fill="#FFFFFF"/>
                        </g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>

            </div>
        </ul>



        <ul id="second-list">
            <li>
                <span></span>
                <div class="title">comment #03</div>
                <div class="info">the best animation , the best toturials you would ever see .</div>
                <div class="name">- mohamed -</div>
                <div class="time">
                    <span>MAR, 21<sup>st</sup></span>
                    <span>03:49 PM</span>
                </div>
            </li>
            <li>
                <span></span>
                <div class="title">summery #02</div>
                <div class="info">the best animation , the best toturials you would ever see here only . you can learn how to animate and how to use SVG . even else you can add your own animations .</div>
                <div class="name">- mohamed -</div>
                <div class="time">
                    <span>MAY, 13<sup>rd</sup></span>
                    <span>09:23 AM</span>
                </div>
            </li>
            <li>
                <span></span>
                <div class="title">comment #04</div>
                <div class="info">the best animation , the best toturials you would ever see . what about canvas ?? do you like it ..</div>
                <div class="name">- mohamed -</div>
                <div class="time">
                    <span>OCT, 15<sup>th</sup></span>
                    <span>08:30 PM</span>
                </div>
            </li>

            <div class="arrow" id="btn2">

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M135.899,167.877c1.902,1.902,4.093,2.851,6.567,2.851s4.661-0.948,6.562-2.851L282.082,34.829    c1.902-1.903,2.847-4.093,2.847-6.567s-0.951-4.665-2.847-6.567L267.808,7.417c-1.902-1.903-4.093-2.853-6.57-2.853    c-2.471,0-4.661,0.95-6.563,2.853L142.466,119.622L30.262,7.417c-1.903-1.903-4.093-2.853-6.567-2.853    c-2.475,0-4.665,0.95-6.567,2.853L2.856,21.695C0.95,23.597,0,25.784,0,28.262c0,2.478,0.953,4.665,2.856,6.567L135.899,167.877z" fill="#FFFFFF"/>
                            <path d="M267.808,117.053c-1.902-1.903-4.093-2.853-6.57-2.853c-2.471,0-4.661,0.95-6.563,2.853L142.466,229.257L30.262,117.05    c-1.903-1.903-4.093-2.853-6.567-2.853c-2.475,0-4.665,0.95-6.567,2.853L2.856,131.327C0.95,133.23,0,135.42,0,137.893    c0,2.474,0.953,4.665,2.856,6.57l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854l133.054-133.046    c1.902-1.903,2.847-4.093,2.847-6.565c0-2.474-0.951-4.661-2.847-6.567L267.808,117.053z" fill="#FFFFFF"/>
                        </g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>

            </div>
        </ul>

        <script src="JavaScript/timeline-V2.js"></script>
    </div>

    <script src="js/index.js"></script>

</body>

</html>